<template>
    <div id="Copy">
        <!--<button type="button" id="audit" class="layui-btn layui-btn-warm" onclick=audit()><i class="layui-icon layui-icon-vercode"></i>审批</button>
        <button type="button" id="printBtn" class="layui-btn" onclick=aa()><i class="layui-icon layui-icon-print"></i>打印</button>-->


        <div style=" float: right;margin-right: 20px;">
            <el-button type="warning" size="mini" id="audit" @click="Approval_eventShow"><i
                    class="el-icon-finished"></i>审批
            </el-button>
            <br/>
            <el-button style="margin-top: 10px;" type="warning" size="mini" id="withdraw" @click="withdraw"><i
                    class="el-icon-back"></i>撤回
            </el-button>
            <br/>
            <!--            <el-button style="margin-top: 10px;" type="success" size="mini" id="printBtn" @click="Print()"-->
            <!--                       v-print="printObj"><i class="el-icon-printer"></i>打印-->
            <!--            </el-button>-->
            <el-button style="margin-top: 10px;" type="success" size="mini" id="printBtn" @click="onPrintClick('oper')">
                <i
                        class="el-icon-printer"></i>打印
            </el-button>

        </div>
        <!--startprint-->
        <form class="wrapper" :style="wrapper" v-if="!printShow">
            <div class="header">
                <img src="/image/logo.jpg"/><label>固基行远，协晨悟通</label>
            </div>
            <h2 :style="TitleOne">固远晨通科技发展有限公司借款申请单</h2>
            <h2 :style="TitleTwo">固远晨通科技发展有限公司支付申请单</h2>
            <table class="report_audit" rules=all>
                <tr>
                    <td>凭证编号</td>
                    <td colspan="3">{{dataDB.LoanNumber}}</td>
                </tr>
                <tr>
                    <td>部门</td>
                    <td>{{_GEtAllDepartmentById(dataDB)}}</td>
                    <td>申请时间</td>
                    <td>{{dataDB.BorrowTime}}</td>
                </tr>
                <tr>
                    <td>项目</td>
                    <td>{{_ProjectById(dataDB)}}</td>
                    <td>申请人</td>
                    <td>{{_UserById(dataDB.Borrower)}}</td>
                </tr>
                <tr>
                    <td>支付方式</td>
                    <td>{{_TransferMethodByt(dataDB.TransferMethod)}}</td>
                    <td>付款时间</td>
                    <td>{{doNewDateTotime(dataDB.ActualPaymentTime)}}</td>
                </tr>
                <tr>
                    <th>类别一</th>
                    <th>类别二</th>
                    <th>金额</th>
                    <th>用途</th>
                </tr>
                <tr v-for="v in detailed" style="text-align:center">
                    <td><label>{{_GetNameById(v.CategoryOne)}}</label></td>
                    <td><label>{{_GetNameById(v.CategoryTwo)}}</label></td>
                    <td>{{v.Money}}</td>
                    <td>{{v.Purpose}}</td>
                </tr>
                <tr>
                    <td>合计金额</td>
                    <td>
                        {{dataDB.Money}}
                    </td>
                    <td>大写</td>
                    <td>{{_Arabia_To_SimplifiedChinese(dataDB.Money)}}</td>
                </tr>
                <tr>
                    <td>收款对象</td>
                    <td colspan="3">{{_AllCustomerUserPayeeById(dataDB)}}</td>
                </tr>
                <tr>
                    <td>收款银行账号</td>
                    <td>{{dataDB.BankCardNumber}}</td>
                    <td>收款开户行</td>
                    <td>{{dataDB.BankName}}</td>
                </tr>
                <tr>
                    <td>财务核准金额</td>
                    <td>{{dataDB.ApprovalMoney}}</td>
                    <td>大写</td>
                    <td>{{_Arabia_To_SimplifiedChinese(dataDB.ApprovalMoney)}}</td>
                </tr>
                <tr>
                    <td>手续费</td>
                    <td colspan="3">{{dataDB.ServiceCharge}}</td>
                </tr>
                <tr>
                    <td>已有票据</td>
                    <td colspan="3">{{_booltoStr(dataDB.HasInvoice)}}</td>
                </tr>
                <tr>
                    <td>备注</td>
                    <td colspan="3">{{dataDB.Remark}}</td>
                </tr>
                <tr>
                    <td>图片</td>
                    <td colspan="3">
                        <el-image v-for="v in imgArray"
                                  style="width: 100px; height: 100px; margin-left:10px"
                                  :src="v"
                                  z-index=9999
                                  :preview-src-list="imgArray">
                        </el-image>
                    </td>
                </tr>
                <tbody id="auditPeople"></tbody>
            </table>

            <table class="report_audit" :style="TitleOne" rules=all>
                <tr>
                    <td width="150">借款人</td>
                    <td width="25%">

                    </td>
                    <td width="70">金额</td>
                    <td width="25%">
                    </td>
                    <td width="70">日期</td>
                    <td width="30%">

                    </td>
                </tr>
            </table>
            <div class="author"><span>固远晨通科技发展有限公司制</span></div>
            <div id="Footer">
                <div style="width:100%"><span style="margin-right: 10px;">固远晨通科技发展有限公司</span><span style="float:right">网址：<a>www.guyuanct.com</a></span>
                </div>
                <div><span>地址：成都西区大道199号成都模具工业园C1栋</span></div>
            </div>
        </form>
        <!--@*HTML会计部分*@-->
        <el-dialog :visible.sync="detailAccount_show" :append-to-body='true' width="40%" title="会计审批">
            <el-form label-width="120px">
                <el-form-item label="金额" prop="Money">
                    <el-input v-model="dataDB.ApprovalMoney"></el-input>
                </el-form-item>
                <div style="text-align:center">
                    <el-button type="success" @click="submitAccount()">确认</el-button>
                </div>
            </el-form>


        </el-dialog>
        <!--@*HTML出纳部分*@-->
        <el-dialog :visible.sync="detailCashier_show" :append-to-body='true' width="60%" title="出纳审批">
            <el-form label-width="70px" :model="dataDB">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="支付方式" prop="ModuleNumber">
                            <el-select required placeholder="请选择类型" v-model="dataDB.TransferMethod"
                                       @change="TransferMethodChange">
                                <el-option :value="0" label="请选择类型"></el-option>
                                <el-option :value="1" label="现金支付">现金支付</el-option>
                                <el-option :value="2" label="银行转账">银行转账</el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" :style="detailCashierstyle">
                        <el-form-item label="银行选择" prop="FinanceBankId">
                            <el-select v-model="dataDB.FinanceBankId" filterable placeholder="银行选择"
                                       style="width:100%">
                                <el-option :value="0" label="请选择银行"> 请选择</el-option>
                                <el-option v-for="(v,k) in AllFinanceBankCard" :value="v.Id" :data-userid="v.Id"
                                           :label="v.CardName" v-text="v.CardName"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" :style="detailCashierstyle">
                        <el-form-item label="手续费" prop="ServiceCharge">
                            <el-input v-model="dataDB.ServiceCharge"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="付款时间" prop="ActualPaymentTime">
                            <el-date-picker
                                    v-model="dataDB.ActualPaymentTime"
                                    type="datetime"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    placeholder="选择时间">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <div style="text-align:center">
                    <el-button type="success" @click="submitCashier()">确认</el-button>
                </div>
            </el-form>
        </el-dialog>
        <!--        <el-steps direction="vertical">-->
        <!--            <el-step>-->
        <!--                <template slot="title">-->
        <!--                </template>-->
        <!--            </el-step>-->
        <!--        </el-steps>-->
        <!--审批部分-->
        <el-dialog v-if="AuditComment_show" :modal="false" :visible.sync="AuditComment_show" width="40%" title="审批"
                   :before-close="onClose">
            <AuditComment ref="AuditCommentRef" :approval-receipt="Approval_event" :approval="Approval"></AuditComment>
        </el-dialog>

        <el-dialog :visible.sync="printShow" :append-to-body='true' width="100%" title="打印" top="0px"
                   :before-close="onPrintclose">
            <el-row>
                <el-col :span="12">
                    <div style="width:230%;margin-left:-68%;transform: scale(0.4,0.4);margin-top: -380px;padding-top: 20px;border:1px black solid"
                         :class="{print_border:printObj.id === 'wrapper'}"
                         @click="onPrintClick('wrapper')">
                        <form class="wrapper" :style="wrapper" id="wrapper">
                            <div class="header">
                                <img src="/image/logo.jpg"/><label>固基行远，协晨悟通</label>
                            </div>
                            <h2 :style="TitleOne">固远晨通科技发展有限公司借款申请单</h2>
                            <h2 :style="TitleTwo">固远晨通科技发展有限公司支付申请单</h2>
                            <table class="report_audit" rules=all>
                                <tr>
                                    <td>凭证编号</td>
                                    <td colspan="3">{{dataDB.LoanNumber}}</td>
                                </tr>
                                <tr>
                                    <td>部门</td>
                                    <td>{{_GEtAllDepartmentById(dataDB)}}</td>
                                    <td>申请时间</td>
                                    <td>{{dataDB.BorrowTime}}</td>
                                </tr>
                                <tr>
                                    <td>项目</td>
                                    <td>{{_ProjectById(dataDB)}}</td>
                                    <td>申请人</td>
                                    <td>{{_UserById(dataDB.Borrower)}}</td>
                                </tr>
                                <tr>
                                    <td>支付方式</td>
                                    <td>{{_TransferMethodByt(dataDB.TransferMethod)}}</td>
                                    <td>付款时间</td>
                                    <td>{{doNewDateTotime(dataDB.ActualPaymentTime)}}</td>
                                </tr>
                                <tr>
                                    <th>类别一</th>
                                    <th>类别二</th>
                                    <th>金额</th>
                                    <th>用途</th>
                                </tr>
                                <tr v-for="v in detailed" style="text-align:center">
                                    <td><label>{{_GetNameById(v.CategoryOne)}}</label></td>
                                    <td><label>{{_GetNameById(v.CategoryTwo)}}</label></td>
                                    <td>{{v.Money}}</td>
                                    <td>{{v.Purpose}}</td>
                                </tr>
                                <tr>
                                    <td>合计金额</td>
                                    <td>
                                        {{dataDB.Money}}
                                    </td>
                                    <td>大写</td>
                                    <td>{{_Arabia_To_SimplifiedChinese(dataDB.Money)}}</td>
                                </tr>
                                <tr>
                                    <td>收款对象</td>
                                    <td colspan="3">{{_AllCustomerUserPayeeById(dataDB)}}</td>
                                </tr>
                                <tr>
                                    <td>收款银行账号</td>
                                    <td>{{dataDB.BankCardNumber}}</td>
                                    <td>收款开户行</td>
                                    <td>{{dataDB.BankName}}</td>
                                </tr>
                                <tr>
                                    <td>财务核准金额</td>
                                    <td>{{dataDB.ApprovalMoney}}</td>
                                    <td>大写</td>
                                    <td>{{_Arabia_To_SimplifiedChinese(dataDB.ApprovalMoney)}}</td>
                                </tr>
                                <tr>
                                    <td>手续费</td>
                                    <td colspan="3">{{dataDB.ServiceCharge}}</td>
                                </tr>
                                <tr>
                                    <td>已有票据</td>
                                    <td colspan="3">{{_booltoStr(dataDB.HasInvoice)}}</td>
                                </tr>
                                <tr>
                                    <td>备注</td>
                                    <td colspan="3">{{dataDB.Remark}}</td>
                                </tr>
                                <tr>
                                    <td>图片</td>
                                    <td colspan="3">
                                        <el-image v-for="v in imgArray"
                                                  style="width: 100px; height: 100px; margin-left:10px"
                                                  :src="v"
                                                  z-index=9999
                                                  :preview-src-list="imgArray">
                                        </el-image>
                                    </td>
                                </tr>
                                <tbody id="auditPeople"></tbody>
                            </table>

                            <table class="report_audit" :style="TitleOne" rules=all>
                                <tr>
                                    <td width="150">借款人</td>
                                    <td width="25%">

                                    </td>
                                    <td width="70">金额</td>
                                    <td width="25%">
                                    </td>
                                    <td width="70">日期</td>
                                    <td width="30%">

                                    </td>
                                </tr>
                            </table>
                            <div class="author"><span>固远晨通科技发展有限公司制</span></div>
                            <div id="Footer">
                                <div style="width:100%"><span style="margin-right: 10px;">固远晨通科技发展有限公司</span><span style="float:right">网址：<a>www.guyuanct.com</a></span>
                                </div>
                                <div><span>地址：成都西区大道199号成都模具工业园C1栋</span></div>
                            </div>
                        </form>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div :style="TitleOne"
                         style="width:150%;margin-left:-32%;transform: scale(0.6,0.6);margin-top: -85px;min-height: 100px;border:1px black solid"
                         :class="{print_border:printObj.id === 'loan'}" @click="onPrintClick('loan')">
                        <div id="loan" style="margin: 50px">
                            <div style="margin-top: 100px;width: 100%;text-align: center">
                                <span style="font-weight:bold;font-size: 30px;letter-spacing:40px">借款单</span>
                                <span style="margin-left: 40px;font-size: 20px">（固远晨通科技发展有限公司）</span>
                            </div>
                            <div style="margin-top: 20px">
                                <el-row>
                                    <el-col :span="14">
                                        <label class="tableTitle">项目名称：</label>
                                        <span style="margin-left: 10px">{{ _ProjectById(dataDB) }}</span>
                                    </el-col>
                                    <el-col :span="6">
                                        <label class="tableTitle">日期：</label>
                                        <span style="margin-left: 10px">{{ dataDB.BorrowTime }}</span>
                                    </el-col>
                                    <el-col :span="4" style="text-align: right">
                                        金额单位：元
                                    </el-col>
                                </el-row>
                            </div>
                            <table class="report_data" rules=all style="margin-top: 20px">
                                <thead style="border-color: #999999;text-align: left">
                                <tr>
                                    <td class="tableDataTh" colspan="10" style="min-height: 50px;">
                                        <div class="tdDiv">
                                            <label class="tableTitle">申请部门：</label>
                                            <span style="margin-left: 10px">{{ _GEtAllDepartmentById(dataDB) }}</span>
                                        </div>
                                    </td>
                                    <td class="tableDataTh" colspan="14">
                                        <div class="tdDiv">
                                            <label class="tableTitle">事由：</label>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="tableDataTh" colspan="5" style="min-height: 50px;">
                                        <div class="tdDiv">
                                            <label class="tableTitle">借款金额（小写）</label>
                                        </div>
                                    </td>
                                    <td class="tableDataTh" colspan="5" style="min-height: 50px;">
                                        <div class="tdDiv">
                                            <span>{{ dataDB.Money }}</span>
                                        </div>
                                    </td>
                                    <td class="tableDataTh" colspan="5" style="min-height: 50px;">
                                        <div class="tdDiv">
                                            <label class="tableTitle">借款金额（大写）</label>
                                        </div>
                                    </td>
                                    <td class="tableDataTh" colspan="9" style="min-height: 50px;">
                                        <div class="tdDiv">
                                            <span>{{ _Arabia_To_SimplifiedChinese(dataDB.Money) }}</span>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="tableDataTh" colspan="10" rowspan="2" style="min-height: 100px;">
                                        <div class="tdDiv">
                                            <label class="tableTitle">备注：</label>
                                            <span style="margin-left: 10px">{{ dataDB.Remark }}</span>
                                        </div>
                                    </td>
                                    <td class="tableDataTh" colspan="5">
                                        <div class="tdDiv">
                                            <label class="tableTitle">收款人名称：</label>
                                        </div>
                                    </td>
                                    <td class="tableDataTh" colspan="9">
                                        <div class="tdDiv">
                                            <span>{{ _AllCustomerUserPayeeById(dataDB)}}</span>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="tableDataTh" colspan="5">
                                        <div class="tdDiv">
                                            <label class="tableTitle">账号 / 卡号</label>
                                        </div>
                                    </td>
                                    <td class="tableDataTh" colspan="9">
                                        <div class="tdDiv">
                                            <span>{{ dataDB.BankCardNumber }}</span>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="tableDataTh" colspan="10">
                                        <div class="tdDiv">
                                            <label class="tableTitle">用款方式</label>
                                            <span style="margin-left: 30px">转账（  {{dataDB.TransferMethod === 1 ? '√' : ''}}  ）</span>
                                            <span style="margin-left: 30px">现金（  {{dataDB.TransferMethod === 2 ? '√' : ''}}  ）</span>
                                        </div>
                                    </td>
                                    <td class="tableDataTh" colspan="5">
                                        <div class="tdDiv">
                                            <label class="tableTitle">开户银行：</label>
                                        </div>
                                    </td>
                                    <td class="tableDataTh" colspan="9">
                                        <div class="tdDiv">
                                            <span>{{dataDB.BankName }}</span>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="tableDataTh" colspan="5">
                                        <div style="min-height: 200px;margin-top: 10px" class="tdDiv">
                                            借款人：
                                        </div>
                                    </td>
                                    <td class="tableDataTh" colspan="5">
                                        <div style="min-height: 200px;margin-top: 10px" class="tdDiv">
                                            部门负责人：
                                        </div>
                                    </td>
                                    <td class="tableDataTh" colspan="5">
                                        <div style="min-height: 200px;margin-top: 10px" class="tdDiv">
                                            会计：
                                        </div>
                                    </td>
                                    <td class="tableDataTh" colspan="5">
                                        <div style="min-height: 200px;margin-top: 10px" class="tdDiv">
                                            总经理：
                                        </div>
                                    </td>
                                    <td class="tableDataTh" colspan="4">
                                        <div style="min-height: 200px;margin-top: 10px" class="tdDiv">
                                            出纳：
                                        </div>
                                    </td>
                                </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                    <div :style="TitleTwo"
                         style="width:150%;margin-left:-25%;transform: scale(0.6,0.6);margin-top: -170px;min-height: 100px;border:1px black solid"
                         :class="{print_border:printObj.id === 'pay'}" @click="onPrintClick('pay')">
                        <div id="pay" style="margin: 50px">
                            <div style="margin-top: 100px;width: 100%;text-align: center">
                                <span style="font-weight:bold;font-size: 40px;">支付申请单</span>
                                <span style="margin-left: 40px;font-size: 20px">（固远晨通科技发展有限公司）</span>
                            </div>
                            <div style="margin-top: 20px">
                                <el-row>
                                    <el-col :span="15">
                                        <label class="tableTitle">项目名称：</label>
                                        <span style="margin-left: 10px">{{ _ProjectById(dataDB) }}</span>
                                    </el-col>
                                    <el-col :span="9" style="text-align: right">
                                        <label class="tableTitle">日期：</label>
                                        <span style="margin-left: 10px">{{ dataDB.BorrowTime }}</span>
                                    </el-col>
                                </el-row>
                            </div>
                            <table class="report_data" rules=all style="margin-top: 20px">
                                <thead style="border-color: #999999;text-align: left">
                                <tr>
                                    <td class="tableDataTh" colspan="10" style="min-height: 50px;">
                                        <div class="tdDiv">
                                            <label class="tableTitle">申请部门：</label>
                                            <span style="margin-left: 10px">{{ _GEtAllDepartmentById(dataDB) }}</span>
                                        </div>
                                    </td>
                                    <td class="tableDataTh" colspan="14">
                                        <div class="tdDiv">
                                            <label class="tableTitle">事由：</label>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="tableDataTh" colspan="8">
                                        <div class="tdDiv">
                                            <label class="tableTitle">付款金额（元）（小写）</label>
                                        </div>
                                    </td>
                                    <td class="tableDataTh" colspan="16">
                                        <div class="tdDiv">
                                            <span>{{ dataDB.Money }}</span>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="tableDataTh" colspan="8">
                                        <div class="tdDiv">
                                            <label class="tableTitle">付款金额（元）（大写）</label>
                                        </div>
                                    </td>
                                    <td class="tableDataTh" colspan="16">
                                        <div class="tdDiv">
                                            <span>{{ _Arabia_To_SimplifiedChinese(dataDB.Money) }}</span>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="tableDataTh" colspan="8">
                                        <div class="tdDiv">
                                            <label class="tableTitle">用款方式</label>
                                        </div>
                                    </td>
                                    <td class="tableDataTh" colspan="16" style="text-align: center">
                                        <div class="tdDiv">
                                            <span>转账（  {{dataDB.TransferMethod === 1 ? '√' : ''}}  ）</span>
                                            <span style="margin-left: 60px">现金（  {{dataDB.TransferMethod === 2 ? '√' : ''}}  ）</span>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="tableDataTh" colspan="8">
                                        <div class="tdDiv">
                                            <label class="tableTitle">收款人全称：</label>
                                        </div>
                                    </td>
                                    <td class="tableDataTh" colspan="16">
                                        <div class="tdDiv">
                                            <span>{{ _AllCustomerUserPayeeById(dataDB)}}</span>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="tableDataTh" colspan="8">
                                        <div class="tdDiv">
                                            <label class="tableTitle">银行账号：</label>
                                        </div>
                                    </td>
                                    <td class="tableDataTh" colspan="16">
                                        <div class="tdDiv">
                                            <span>{{ dataDB.BankCardNumber }}</span>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="tableDataTh" colspan="8">
                                        <div class="tdDiv">
                                            <label class="tableTitle">开户银行：</label>
                                        </div>
                                    </td>
                                    <td class="tableDataTh" colspan="16">
                                        <div class="tdDiv">
                                            <span>{{ dataDB.BankName }}</span>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="tableDataTh" colspan="8">
                                        <div class="tdDiv">
                                            <label class="tableTitle">是否带票支付</label>
                                            <div style="margin-top: 20px">
                                                是（ {{dataDB.HasInvoice ? '√' : ''}} ）
                                                <span style="margin-left: 30px">否（  {{!dataDB.HasInvoice ? '√' : ''}}  ）</span>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="tableDataTh" colspan="16">
                                        <div class="tdDiv">
                                            <label class="tableTitle">备注：</label>
                                            <span style="margin-left: 10px">{{ dataDB.Remark }}</span>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="tableDataTh" colspan="5">
                                        <div style="min-height: 200px;margin-top: 10px" class="tdDiv">
                                            借款人：
                                        </div>
                                    </td>
                                    <td class="tableDataTh" colspan="5">
                                        <div style="min-height: 200px;margin-top: 10px" class="tdDiv">
                                            部门负责人：
                                        </div>
                                    </td>
                                    <td class="tableDataTh" colspan="5">
                                        <div style="min-height: 200px;margin-top: 10px" class="tdDiv">
                                            会计：
                                        </div>
                                    </td>
                                    <td class="tableDataTh" colspan="5">
                                        <div style="min-height: 200px;margin-top: 10px" class="tdDiv">
                                            总经理：
                                        </div>
                                    </td>
                                    <td class="tableDataTh" colspan="4">
                                        <div style="min-height: 200px;margin-top: 10px" class="tdDiv">
                                            出纳：
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="tableDataTh" colspan="24">
                                        <div class="tdDiv">
                                            回单凭证
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="tableDataTh" colspan="24">
                                        <div style="height: 280px" class="tdDiv">

                                        </div>
                                    </td>
                                </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <el-button style="position: fixed;right: 50px;top: 100px" type="success" size="mini"
                       v-print="printObj"><i class="el-icon-printer"></i>打印
            </el-button>
        </el-dialog>
    </div>
</template>
<script>
    import * as publicjs from "/public/Scriput/Public"
    import AuditComment from "../AuditComment";

    export default {
        name: "FinanceLoanOrder",
        components: {
            'AuditComment': AuditComment
        },
        props: {
            dataDB: {
                type: Object,
                request: true,
            },
            TableTypeNumber: {
                type: Number,
                request: true,
            },
            AllUsers: {
                type: Array,
                required: true
            },
            AllProject: {
                type: Array,
                required: true
            },
            AllDepartment: {
                type: Array,
                required: true
            },
            AllCustomer: {
                type: Array,
                required: true
            },
            AllCategory: {
                type: Array,
                required: true
            },
        },
        data() {
            return {
                detailCashier_show: false,
                detailAccount_show: false,
                AuditComment_show: false,
                printShow: false,
                rightState: 0,
                detailed: [],
                AllFinanceBankCard: [],
                TitleOne: {
                    display: "none",
                },
                TitleTwo: {
                    display: "none",
                },
                detailCashierstyle: {
                    display: "none",
                },
                wrapper: {
                    width: "80%",
                    height: " 100%",
                    margin: "auto",
                },
                printObj: {
                    id: "wrapper",  //打印标签的id
                    popTitle: '固远晨通办公管理系统',  //文件标题
                    extraCss: 'http://www.guyuanct.com/',
                    extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
                    endcallback: (e) => {
                        this.wrapper.width = "80%"
                    },
                },
                // 审批弹窗返回数据
                Approval: {
                    State: 1,
                    Comment: '',
                },
                //图片数据
                imgArray: [],
            }
        },
        watch: {
            dataDB: function (val, oval) {
                this.InitImg();
                this.order()
                this.TableTypeNumberMeth()
            },
        },
        created() {
            //this.GetAllFile()
            this.InitImg();
            this.order();
            this.TableTypeNumberMeth()
            // 注入AllUsers数据
            publicjs.getAllUsers(this.$store.state.AllUsers)
            this.AllFinanceBankCard = publicjs.GetAllFinanceBankCard(this.$http);

        },
        methods: {
            async InitImg() {
                this.imgArray = await publicjs.GetAllFileByUrl(this.$http, "256," + this.dataDB.Id);
            },
            _UserById(id) {
                for (var i = 0; i < this.AllUsers.length; i++) {
                    if (this.AllUsers[i].Id == id) {
                        return this.AllUsers[i].UserName;
                    }
                }
            },
            _GEtAllDepartmentById(scope) {
                for (var i = 0; i < this.AllDepartment.length; i++) {
                    if (this.AllDepartment[i].Id == scope.Department) {
                        return this.AllDepartment[i].DepartmentName;
                    }
                }
            },
            _ProjectById(d) {
                for (var i = 0; i < this.AllProject.length; i++) {
                    if (this.AllProject[i].Id == d.Project) {
                        return this.AllProject[i].ProjectName;
                    }
                }
            },
            _TransferMethodByt(obj) {
                if (obj == 1) {
                    return "现金支付";
                } else if (obj == 2) {
                    return "银行转账";
                }

            },
            doNewDateTotime(time) {
                if (time) {
                    return publicjs.formatDate(new Date(time), "yyyy-MM-dd hh:mm:ss")
                } else {
                    return "";
                }
            },

            _Arabia_To_SimplifiedChinese(obj) {
                return publicjs.Arabia_To_SimplifiedChinese(obj);
            },

            _AllCustomerUserPayeeById(d) {
                if (d.PayeeType == 1) {
                    for (var i = 0; i < this.AllCustomer.length; i++) {
                        if (this.AllCustomer[i].Id == d.Payee) {
                            // d.Payee = this.AllCustomer[i].CustomerCompany;
                            d.BankCardNumber = this.AllCustomer[i].BankAccount;
                            d.BankName = this.AllCustomer[i].OpeningBank;
                            return this.AllCustomer[i].CustomerCompany
                        }
                    }
                } else if (d.PayeeType == 2) {
                    for (var i = 0; i < this.AllUsers.length; i++) {
                        if (this.AllUsers[i].Id == d.Payee) {
                            //    d.Payee = this.AllCustomer[i].UserName;
                            d.BankCardNumber = this.AllCustomer[i].BankCardNumber;
                            d.BankName = this.AllCustomer[i].BankName;
                            return this.AllUsers[i].UserName;
                        }
                    }
                }
            },
            _booltoStr(obj) {
                if (obj) {
                    return "是";
                } else {
                    return "否";
                }
            },

            _GetNameById(id) {
                for (var i = 0; i < this.AllCategory.length; i++) {
                    let Id = parseInt(id)
                    if (Id == this.AllCategory[i].Id) {
                        return this.AllCategory[i].CategoryName;
                    }
                }
            },
            TableTypeNumberMeth() {
                if (this.TableTypeNumber == 1) {
                    this.TitleOne.display = "block";
                    this.TitleTwo.display = "none";
                } else {
                    this.TitleTwo.display = "block";
                    this.TitleOne.display = "none";
                }
            },

            order() {
                let loadding = this.openLoading();
                this.$http.get("/Finance/FinanceLoanOrder?FinanceLoanNumber=" + this.dataDB.LoanNumber).then((list) => {
                    var result = list.data;
                    this.detailed = [];
                    this.rightState = result.rightState
                    for (var i = 0; i < result.obj.FinanceDocDetails.length; i++) {
                        this.detailed.push(result.obj.FinanceDocDetails[i]);
                    }
                    loadding.close();
                    this._AddAuditPeople(result.obj, 3, result.auditRule);
                }).catch((res) => {
                    this.$message.error('服务器异常,请联系管理员!')
                    console.log(res)
                });
            },

            _AddAuditPeople(arr, count, number) {
                publicjs.AddAuditPeople(arr, count, number);
            },
            // 关闭审批结果组件
            async onClose(done) {
                await done();
                this.$refs["AuditCommentRef"].FormClose_event();
            },
            //审批
            Approval_event() {
                //先置空
                if (this.rightState == 1) {
                    this.openAccountPage();
                } else if (this.rightState == 2) {
                    this.openCashierPage();
                } else {
                    this.AuditOrder();
                }
            },

            AuditOrder() {
                if (this.Approval.length == 0) {
                    return false;
                }
                let loadding = this.openLoading();
                this.$http.post('Finance/AuditFinanceLoanOrder', {
                    finance: this.dataDB,
                    State: this.Approval.State,
                    Comment: this.Approval.Comment,
                }).then(res => {
                    loadding.close();
                    if (res.data.IsSuccess) {
                        this.$http.get("/Finance/FinanceLoanOrder?FinanceLoanNumber=" + this.dataDB.LoanNumber).then((list) => {
                            var result = list.data;
                            this.detailed = [];
                            for (var i = 0; i < result.obj.FinanceDocDetails.length; i++) {
                                this.detailed.push(result.obj.FinanceDocDetails[i]);
                            }
                            this._AddAuditPeople(result.obj, 3, result.auditRule);
                        });
                        this.$message.success(res.data.Msg)
                    } else {
                        this.$message.warning(res.data.Msg)
                    }
                    this.AuditComment_show = false
                })
                this.$refs["AuditCommentRef"].FormClose_event();
            },

            openAccountPage() {
                if (this.Approval.State == 0) {
                    this.AuditOrder();
                } else {
                    this.dataDB.ApprovalMoney = this.dataDB.Money;
                    this.detailAccount_show = true;
                }
            },

            openCashierPage() {

                if (this.Approval.State == 0) {
                    this.AuditOrder();
                } else {
                    this.detailCashier_show = true;
                }
            },
            //会计
            submitAccount() {
                if (this.dataDB.ApprovalMoney == "") {
                    this.$message.error("请输入核准金额");
                    return false;
                }
                this.detailCashier_show = false;
                this.detailAccount_show = false;
                this.AuditOrder();
            },
            //出纳
            submitCashier() {
                if (!this.dataDB.ActualPaymentTime) {
                    this.$message.error('请选择付款时间!');
                    return
                }
                this.AuditOrder();
                this.detailCashier_show = false;
                this.detailAccount_show = false;
            },

            //打开审批界面
            Approval_eventShow() {
                this.AuditComment_show = true;
            },
            // 审批撤回
            withdraw() {
                this.$confirm('您确定要撤回吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    if (!this.$store.state.enumDes.length) {
                        this.$message.error('数据错误,请重新登录!');
                        return
                    }
                    let Modulenumber = "";
                    for (let i = 0; i < this.$store.state.enumDes.length; i++) {
                        if (this.$store.state.enumDes[i].key === "Loan") {
                            Modulenumber = this.$store.state.enumDes[i].value;
                            break;
                        }
                    }
                    this.$http.post("PublicMethodApi/RevokeApproveState", {
                        FormId: this.dataDB.Id,
                        Modulenumber: Modulenumber,
                    }).then(res => {
                        if (res.data.Status) {
                            this.$http.get("/Finance/FinanceLoanOrder?FinanceLoanNumber=" + this.dataDB.LoanNumber).then((list) => {
                                var result = list.data;
                                this.detailed = [];
                                for (var i = 0; i < result.obj.FinanceDocDetails.length; i++) {
                                    this.detailed.push(result.obj.FinanceDocDetails[i]);
                                }
                                this._AddAuditPeople(result.obj, 3, result.auditRule);
                            });
                            this.$message.success(res.data.Message)
                        } else {
                            this.$message.error(res.data.Message)
                        }
                    }).catch(() => {
                        this.$message.error('服务器异常,请联系管理员!')
                    })
                }).catch(() => {

                })
            },


            TransferMethodChange() {
                if (this.dataDB.TransferMethod == 2) {
                    this.detailCashierstyle.display = "inline-block"
                } else {
                    this.detailCashierstyle.display = "none"
                }
            },
            onPrintClick(key) {
                if (key === "oper") {
                    this.printObj.id = "wrapper"
                    this.printShow = true;
                    this.order();
                } else {
                    this.printObj.id = key;
                }
            },
            async onPrintclose(done) {
                await done();
                this.printShow = false;
                this.order();
            },
        }
    }
</script>


<style scoped>
    .time {
        text-align: right;
    }

    /*外包装样式*/
    /*   .wrapper {
        width: 80%;
        height: 100%;
        margin: auto;
    }*/
    /*页眉样式*/
    .header {
        font-weight: bold;
        font-size: 20px;
        font-family: cursive;
        width: 80%;
        margin: auto;
        border-bottom: 2px solid black;
        padding: 0px 0px;
        position: relative;
    }

    .header img {
        width: 200px;
        height: 55px;
    }

    .header label {
        position: absolute;
        bottom: 10px;
        right: 70px;
    }

    /*标题样式*/
    h2 {
        width: 80%;
        text-align: center;
        font-size: 25px;
        font-weight: bold;
        margin: auto;
        padding: 10px 0;
    }

    /*标题样式*/
    h4 {
        width: 80%;
        text-align: center;
        font-weight: bold;
        margin: auto;
        padding: 10px 0;
    }

    /*数据表格样式*/
    .report_data {
        width: 100%;
        text-align: center;
        border: 1px solid black;
        font-size: 14px;
        word-break: break-all;
    }

    .report_data tr {
        height: 40px;
    }

    .report_data th {
        font-weight: 100;
    }

    .baseInfo {
        height: 20px;
        line-height: 20px;
        border: 1px solid black;
        border-bottom: 0px;
        padding: 8px;
    }

    .baseInfo .worderWrapper {
        display: inline-block;
        width: 200px;
    }

    .style {
        height: 40px;
        line-height: 40px;
        border: 1px solid black;
        border-bottom: 0px;
        padding: 8px;
    }

    .price {
        border-top: none;
    }

    /*审核表格样式*/
    .report_audit {
        width: 100%;
        border: 1px solid black;
        font-size: 14px;
    }

    .report_audit .tdCenter {
        text-align: center;
    }

    .report_audit tr {
        height: 50px;
    }

    .report_audit tr p {
        padding: 3px;
    }

    .report_audit td {
        padding: 0 10px;
    }

    .report_audit td:first-child {
        width: 150px;
    }

    .report_audit .tr_center {
        text-align: center;
    }

    .audit {
        font: italic bold 20px/30px arial, sans-serif;
        text-align: right;
    }

    .audit span {
        display: inline-block;
        width: 100px;
        font: bold 17px/30px arial, sans-serif;
    }

    .author {
        width: 80%;
        margin: auto;
        margin-top: 5px;
        font-weight: bold;
        text-align: right;
    }

    /*页脚样式*/
    #Footer {
        width: 80%;
        margin: auto;
        border-top: 2px solid black;
        margin-top: 60px;
        font-weight: bold;
    }

    #Footer div {
        padding-top: 5px;
        padding-bottom: 10px;
    }

    #search select {
        text-align: left;
    }

    /*折叠面板样式修改*/
    .layui-collapse .layui-colla-title {
        margin: 0;
        width: 100%;
        text-align: left;
    }

    /*报表管理下统计报表的样式*/
    #EchartData .pie {
        height: 500px;
    }

    #EchartData .pieData {
        float: left;
        width: 50%;
        height: 500px;
    }

    #EchartData .bar {
        width: 100%;
        height: 500px;
    }

    .report_data .tr_one {
        height: 50px;
    }

    .report_data .tr_two {
        height: 100px;
    }

    .report_data .td_Title {
        font-weight: bold;
    }

    .report_data .layui-form-radio > i:hover, .report_data .layui-form-radioed > i {
        color: #5FB878 !important;
    }

    .print_border {
        border-color: red !important;
    }
</style>
